<template>
    <el-menu
        default-active="activeIndex"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="height: calc(100vh - 70px);">
        
        <el-sub-menu :index="item.key" v-for="item in menuData" :key="item.key">
            <template #title>
                <el-icon>
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{ item.title }}</span>
            </template>
            <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.key">
                <el-icon>
                    <component :is="subItem.icon"></component>
                </el-icon>
                <router-link :to="subItem.path">
                    {{ subItem.title }}
                </router-link>
            </el-menu-item>

        </el-sub-menu>


    </el-menu>
</template>

<script setup>

import { ref,reactive} from 'vue'
import {onMounted} from 'vue'
import * as menu from '../assets/menu.js'

const menuData=ref([])

onMounted(()=>{
    // menuData.value=[
    //     {
    //         key: 'menu-1',
    //         title: '员工模块',
    //         icon: 'User',
    //         children:[
    //             {
    //                 key: 'menu-1-1',
    //                 title: '员工管理',
    //                 path: '/emp',
    //                 icon: 'Avatar'
    //             },
    //             {
    //                 key: 'menu-1-2',
    //                 title: '其他页面 ',
    //                 path: '/other',
    //                 icon: 'Avatar'   
    //             }
    //         ]
    //     },
    //     {
    //         key: 'menu-2',
    //         title: '其他模块',
    //         path: '/other',
    //         icon: 'Lock'
    //     }
    // ]


    menu.find()
        .then(res=>{
            menuData.value=res.data
        })

})


</script>